<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14;
            color: #333;
            line-height: 1.5;
            background-color: #fff;
        }

        a {
            text-decoration: none;
            color: black;
        }

        ul li {
            list-style: none;
        }

        img {
            vertical-align: middle;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .cf::after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 1226px;
            margin: 0 auto;
            background-color: #ccc;
            text-align: center;
        }

        .boxbt {
            height: 40px;
            background-color: aqua;
            text-align: left;
            line-height: 40px;
        }

        .bt2 {
            float: right;
            width: 80px;
            height: 40px;
            background-color: rgb(3, 69, 47);
        }

        .box1 {
            padding: 10px 0;
        }

        .imagea {
            width: 234px;
            height: 622px;
            background-color: bisque;
        }

        .leibiao {
            height: 640px;
        }

        .leibiao ul {
            display: flex;
            flex-wrap: wrap;
            width: 992px;
            height: 640px;
        }

        .leibiao li {
            width: 234px;
            height: 246px;
            padding-top: 34px;
            padding-bottom: 20px;
            margin-left: 14px;
            margin-bottom: 14px;
            background-color: pink;
            display: inline-block;
        }

        .leibiao img {
            width: 150px;
            height: 150px;
            background-color: rgb(113, 60, 60);
        }

        .leibiao a {
            display: inline-block;
        }

        .leibiao h3 {
            margin-top: 10px;
            height: 20px;
            background-color: rgb(113, 113, 148);
        }

        .leibiao p {
            margin-top: 10px;
            height: 20px;
            background-color: rgb(65, 65, 162);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="boxbt">
            标题
            <div class="bt2"><a href="#"></a></div>
        </div>

        <div class="box1 cf">
            <div class="imagea fl">
                图片
            </div>
            <div class="leibiao fl">
                <ul>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="" alt="">
                            <h3></h3>
                            <p></p>
                            <p><span></span></p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</body>

</html>